<template>
  <div class="cl-select-component">
    <div class="text" @click='show = !show'>{{value || placeholder}}</div>
    <div class="icon" @click='show = !show'>
      <div class='arrow' />
    </div>
    <div class="options-list" v-if="show">
      <div class="option" v-for="e in options" @click='setValue(e)'>{{e}}</div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, onBeforeUnmount} from "vue"
import {defineEmits} from "vue";
const show = ref(false)
const value = ref()


defineProps({
  options: {
    type: Array,
    default: []
  },
  placeholder: {
    type: String,
    default: '请选择'
  }
})

const emit = defineEmits(['change-value'])

const setValue = v => {
  value.value = v
  show.value = false;
  emit('change-value', v)
}

const clickHandler = e => {
  if(e.target.parentNode.className === "cl-select-component"){
    return;
  }
  show.value = false;
}

onMounted(() => {
  document.addEventListener("click", clickHandler, false)
})

onBeforeUnmount(() => {
  document.removeEventListener("click", clickHandler)
})

</script>

<style scoped lang='less'>
.cl-select-component {
  cursor: pointer;
  width: 388px;
  height: 60px;
  line-height: 60px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  border: 1px solid #9EB9D4;
  display: flex;
  position: relative;
  .text {
    flex: 1;
    text-indent: 20px;
  }
  .icon {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    .arrow {
      width: 0;
      height: 0;
      border-top: 12px solid #fff;
      border-right: 12px solid transparent;
      border-left: 12px solid transparent;
    }
  }
  .options-list {
    position: absolute;
    left: 0;
    top: 61px;
    width: 100%;
    border: 1px solid #9EB9D4;
    .option {
      text-indent: 20px;
      &:hover {
        background: rgba(255,255,255,.2);
      }
    }
  }
}
</style>
